<template>
    <el-dialog v-model="dialogFormVisible"
        @close="close"
        :title="title">
        <el-form
            ref="dialogForm"
            :model="dialogFormData">
            <el-form-item>
                <slot name="upload"></slot>
            </el-form-item>
            <el-form-item
                v-for="(v, k) in dialogFormData"
                :key="k"
                :label="v.label"
                :label-width="formLabelWidth"
                :prop="(k + '.value')"
                :rules="{
                    required: true,
                    trigger: 'blur',
                    message: v.label + '不能为空'
                }">
                <el-input v-model="v.value" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm(dialogForm)" type="primary">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>

import { ref, watchEffect, toRefs } from "vue"
let props = defineProps({
    title: {
        type: String,
        default() {
            return '增加学员信息'
        }
    },
    visible: {
        type: Boolean,
        default() {
            return false
        }
    },
    dialogFormData: {
        type: Object,
        default() {
            return {}
        }
    },
    formLabelWidth: {
        type: String,
        default() {
            return '140px'
        }
    }

})
let emits = defineEmits(['validateSuccess', 'dialogCancel', 'closed'])
let dialogFormVisible = ref(false)
let { visible } = toRefs(props)
watchEffect(() => {
    dialogFormVisible.value = visible.value
})
let cancel = () => {
    emits('dialogCancel')
}
let dialogForm = ref()
let confirm = (form) => {
    form.validate(valid => {
        if (valid) {
            emits('validateSuccess', dialogForm)
        } else {
        }
    })
}
let close = () => {
    emits('closed')
}
</script>